<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.html">

    <title>Blank</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="css/bootstrap-reset.css" rel="stylesheet">s -->
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet"/>

    <link href="css/local.css" rel="stylesheet"/>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<section id="container" class="">
    <!--header start-->
    <div id="header">

    </div>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <!-- page start-->
            <div class="main-container ace-save-state" id="main-container">

                <div class="main-content">
                    <div class="main-content-inner">
                        <div class="page-content">
                            <div class="page-header">
                                <h1>
                                    添加
                                    <small>
                                        <i class="ace-icon fa fa-angle-double-right"></i>
                                        人员信息
                                    </small>
                                </h1>
                            </div><!-- /.page-header -->

                            <div class="row">
                                <div class="col-xs-12">
                                    <!-- PAGE CONTENT BEGINS -->
                                    <form class="form-horizontal" role="form" id="myForm" method="post"
                                          enctype="multipart/form-data">

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right"
                                                   for="phone"> 电话* </label>

                                            <div class="col-sm-5">
                                                <input type="tel" id="phone" name="phone" v-model="phone"
                                                       placeholder="电话" class="form-control" datatype="m"
                                                       errormsg="请输入正确的手机号码" nullmsg="请填写电话"/>
                                                <div class="Validform_checktip"
                                                     style="color: red;font-size: 17px;"></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right"
                                                   for="keyContactsphone"> 紧急联系人电话 *</label>
                                            <div class="col-sm-5">
                                                <input type="text" id="keyContactsphone" name="keyContactsphone"
                                                       v-model="keyContactsphone"
                                                       placeholder="紧急联系人电话" class="form-control " datatype="m"
                                                       errormsg="请输入正确的手机号码" nullmsg="请填写电话"/>
                                                <div class="Validform_checktip"
                                                     style="color: red;font-size: 17px;"></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right"> 职位 *
                                            </label>

                                            <div class="col-sm-5">
                                                <select name="interfacelanguage" class="form-control"
                                                        v-model="positionId" @change="getvaluemethod($event)"
                                                        datatype="*" errormsg="请输入职位">
                                                    <option value="" selected>--请选择--</option>
                                                    <option :value="item.id" v-for="item in positions">{{item.post}}
                                                    </option>
                                                </select>
                                                <div class="Validform_checktip"
                                                     style="color: red;font-size: 17px;"></div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label no-padding-right"
                                                   style="line-height: 94px;"> 请上传身份证的图片* </label>

                                            <div class="col-sm-5">

                                                <div class="layui-upload-drag" id="front">
                                                    <i class="layui-icon"></i>
                                                    <p>请上传身份证正面图片</p>
                                                    <div class="layui-hide" id="uploadDemoView1">
                                                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                    </div>
                                                </div>

                                                <div class="layui-upload-drag" id="reverseSide">
                                                    <i class="layui-icon"></i>
                                                    <p>请上传身份证反面图片</p>
                                                    <div class="layui-hide" id="uploadDemoView2">
                                                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <input type="hidden" name="identityCode" v-model="identityCode">
                                        <input type="hidden" name="age" v-model="age">
                                        <input type="hidden" name="sex" v-model="sex">
                                        <input type="hidden" name="address" v-model="address">
                                        <input type="hidden" name="userName" v-model="userName">
                                        <input type="hidden" name="frontName" v-model="frontName">
                                        <input type="hidden" name="backName" v-model="backName">


                                        <div class="clearfix form-actions">
                                            <div class="col-md-offset-3 col-md-9">
                                                <button class="btn btn-danger" id="tijiao" type="button">
                                                    <!--                                                      <i class="ace-icon fa fa-check bigger-110"></i>-->
                                                    添加
                                                </button>

                                                &nbsp; &nbsp; &nbsp;
                                                <button class="btn" type="reset">
                                                    <!--                                                      <i class="ace-icon fa fa-undo bigger-110"></i>-->
                                                    重置
                                                </button>
                                                &nbsp; &nbsp; &nbsp;
                                                <button class="btn btn-info" type="button"
                                                        onclick="javascript:history.back()">
                                                    <!--                                                      <i class="ace-icon fa fa-undo bigger-110"></i>-->
                                                    返回
                                                </button>
                                            </div>
                                        </div>


                                    </form>

                                    <!-- PAGE CONTENT ENDS -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div><!-- /.page-content -->
                    </div>
                </div><!-- /.main-content -->

            </div>
            <!-- page end-->
        </section>
    </section>
</section>
<!--main content end-->


<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/layui.js"></script>

<!--common script for all pages-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js"></script>
<script src="js/Validform_v5.3.2_min.js"></script>
<script src="localjs/director-add.js"></script>
<script>
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;

        let date = new Date();
        let dateYear = date.getFullYear();

        //拖拽上传
        upload.render({
            elem: '#front',
            url: 'yly-api/admin/card'
            , data: {"id_card_side": "front"},
            headers: {"url": window.location.pathname, "token": localStorage.token},
            done: function (data) {

                console.log(data);
                if (data.status == "success") {
                    alert("上传成功！");
                    let aa = JSON.parse(data.result);
                    app.frontName = data.frontName;

                    app.identityCode = aa.words_result.公民身份号码.words;
                    app.userName = aa.words_result.姓名.words;
                    app.address = aa.words_result.住址.words;
                    app.sex = aa.words_result.性别.words;

                    let s = aa.words_result.出生.words.substring(0, 4);
                    console.log(dateYear);
                    console.log(s)
                    console.log(dateYear - s)
                    app.age = dateYear - s;
                    layui.$('#uploadDemoView1').removeClass('layui-hide').find('img').attr('src', "http://1.116.220.143:9999/"+data.frontName);
                } else {
                    alert("上传失败！");
                }

            }, error: function (error) {
                console.log(error.status);
                if (error.status == 401) {
                    alert("权限不足，请先登录!");
                    location.href = "login.html";
                } else if (error.status == 403) {
                    alert("用户已过期，请重新登录！");
                    localStorage.token = null;
                    location.href = "login.html";
                }
            }
        });
        //拖拽上传
        upload.render({
            elem: '#reverseSide',
            url: 'yly-api/admin/card' //改成您自己的上传接口
            , data: {"id_card_side": "back"},
            headers: {"url": window.location.pathname, "token": localStorage.token},
            done: function (data) {

                console.log(data);
                if (data.status == "success") {
                    app.backName = data.backName;
                    layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', "http://1.116.220.143:9999/"+data.backName);
                    alert("上传成功！");
                } else {
                    alert("上传失败！");
                }


            }, error: function (error) {
                console.log(error.status);
                if (error.status == 401) {
                    alert("权限不足，请先登录!");
                    location.href = "login.html";
                } else if (error.status == 403) {
                    alert("用户已过期，请重新登录！");
                    localStorage.token = null;
                    location.href = "login.html";
                }
            }
        });

    });
</script>
<script>
    var app = new Vue({
        el: "#container",
        data: {
            userName: "",
            phone: "",
            address: "",
            keyContactsphone: "",
            sex: "",
            age: "",
            identityCode: "",
            positions: [],
            positionId: "",
            backName: "",
            frontName: "",
        },
        mounted() {
            this.positionInfo();
        },
        methods: {
            positionInfo() {
                axios({
                    url: "yly-api/admin/queryPosition",
                    method: "get",
                    headers: {"url": window.location.pathname, "token": localStorage.token}
                }).then(function (res) {
                    console.log(res.data);
                    if (res.data.code == 200) {
                        app.positions = res.data.data;
                    } else if (res.data.code == 500) {
                        location.href = "500.html";
                    }
                }).catch(function (error) {
                    console.log(error.response.status);
                    if (error.response.status == 401) {
                        alert("权限不足，请先登录!");
                        location.href = "login.html";
                    } else if (error.response.status == 403) {
                        alert("用户已过期，请重新登录！");
                        localStorage.token = null;
                        location.href = "login.html";
                    }
                })
            },
            getvaluemethod(event) {
                console.log(event.target.value);
                this.positionId = event.target.value;
            }
        }
    })
</script>
<script src="js/common-scripts.js"></script>

</body>
</html>
